<style lang="less">
	page {
		background-color: #F7F7F7;
		padding-bottom: 30upx;
	}

	.tab {
		box-sizing: border-box;
		margin-top: 30upx;
		display: flex;
		align-items: center;
		padding: 30upx 0;
		background-color: #FFFFFF;
		border-bottom: 1upx solid #EDEDED;

		.tab_txt {
			text-align: center;
			font-size: 28upx;
			font-weight: bold;
			color: #333333;
			line-height: 28upx;
		}
	}

	.first {
		width: 26%;
	}

	.second {
		width: 35%;
		margin-right: 2%;
	}

	.main {
		background-color: #FFFFFF;
	}

	.list {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 30upx 0;
		border-bottom: 1upx solid #EDEDED;

		.list_txt {
			text-align: center;
			font-size: 28upx;
			font-weight: 500;
			color: #333333;
			line-height: 34upx;
		}

		.price {
			word-break: break-all;
			// word-wrap: break-word;
			font-size: 32upx;
			font-family: "DINCond";
			font-weight: 400;
			color: #333333;
			line-height: 32upx;
		}
		.one{
			color: #EEB726;
		}
		.two{
			color: #9BA7B3;
		}
		.three{
			color: #B39768;
		}
	}
	.zan{
		background-color: #FFFFFF;
		font-size: 30upx;
		font-weight: 500;
		text-align: center;
		padding: 30upx 0;
	}
</style>


<template>

	<view class="container">
		<view class="tab">
			<view class="first tab_txt">排名</view>
			<view class="second tab_txt">品牌名</view>
			<view class="second tab_txt">总销售额</view>
		</view>
		<view class="main" v-if="list != '' && list != null && list != undefined">
			<view class="list" v-for="(v,i) in list" :key="i">
				<view class="first list_txt price one" v-if="v.rn == 1">{{v.rn}}</view>
				<view class="first list_txt price two" v-if="v.rn == 2">{{v.rn}}</view>
				<view class="first list_txt price three" v-if="v.rn == 3">{{v.rn}}</view>
				<view class="first list_txt price" v-if="v.rn != 1 && v.rn != 2 && v.rn != 3">{{v.rn}}</view>
				<view class="second list_txt">{{v.name}}</view>
				<view class=" second list_txt price">¥ {{v.business}}</view>
			</view>
		</view>
		<view class="zan" v-else>暂无数据！</view>
		<!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
	</view>

</template>

<script>
	import api from '@/common/api';
	export default {

		components: {},

		data() {

			return {
				list: [],
				token: '',
				// loadMoreText: "加载中...",
				// showLoadMore: true,
				// totalPage:null,
				// page:1
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			// this.token ='eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjo0MzU0OCwiZXhwIjoxNjM3ODI3NjI1fQ.N9Tf8SHl8yJ0Ol7Qzn5QsqwbvhRafpPr1abcvPaxQ5VRKDSK3B5LLa8_d3uInMNlbqSHuxz69Cs3Cv0iE4RvzA'
			this.brandRanking()
		},
		methods: {
			async brandRanking() {
				const [err, res] = await api.brandRanking({
					header: {
						'Content-Type': 'application/json',
						'token': this.token
					}
				});
				if (res.data.code == 0) {
					this.list = res.data.data
				}
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.brandRanking()
			setTimeout(function() {
				uni.stopPullDownRefresh(); //停止下拉刷新动画
			}, 1000);
		},
		
		
		// onReachBottom() {
		// 	this.showLoadMore = true;
		// 	if (this.page >= this.totalPage) {
		// 		this.loadMoreText = "没有更多数据了!"
		// 		return;
		// 	}else{
		// 		setTimeout(() => {
		// 			this.page++
		// 			this.loadMoreText = "加载中..."
		// 			// this.teamOwn(this.page);
		// 		}, 300);
		// 	}
		// },
	}
</script>
